<!-- 模块说明 -->
<style lang="scss" scoped>
.ipt {
  width: 200px;
  margin-right: 10px;
}
.header {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.main {
  margin-top: 20px;
  display: flex;
  .main-right {
    margin-left: 20px;
    border: 1px solid #aaa;
    width: 350px;
    height: 500px;
    overflow-y: auto;
    .main-right-item {
      margin: 5px;
      padding: 5px;
      border: 1px solid #ccc;
      width: 96%;
      border-radius: 5px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 16px;
      &:hover {
        background-color: #ccc;
      }
      img {
        width: 100px;
        margin-right: 5px;
      }
      span {
        color: #eca710;
      }
    }
  }
  .check {
    background-color: #ccc;
  }
  .JsonEditorVue {
    border: 1px solid #aaa;
    // height: 535px;
    flex: 1;
  }
  :deep .jsoneditor-menu {
    display: none;
  }
  :deep .jsoneditor {
    border: 0;
  }
  :deep .full-screen {
    display: none;
  }
}
</style>
<template>
  <div>
    <header class="header">
      <div>
        <el-select v-model="selectValue" placeholder="选择搜索类型" class="ipt">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="inputValue" class="ipt" @keydown.enter="search" placeholder="请输入" />
        <el-button @click="search" type="primary">搜索</el-button>
      </div>
      <div>
        <el-input
          v-show="checkValue"
          class="ipt"
          :value="checkValue"
          style="text-align: right"
          @keydown.enter="search"
          placeholder="请输入"
        />
        <el-button v-show="checkValue" type="primary" @click="copy">复制</el-button>
      </div>
    </header>
    <main class="main">
      <section class="JsonEditorVue">
        <JsonEditorVue
          v-model="dataSql"
          style="height: 100%; width: 100%"
          currentMode="code"
        ></JsonEditorVue>
      </section>
      <div class="main-right">
        <section
          v-for="(ele, i) in dataSql.searchCurriculumVOS"
          :key="i"
          :class="`main-right-item ${checkCurriculumDes === i ? 'check' : ''}`"
          @click="clickItem(ele, i)"
        >
          <img src="https://image.talk2best.cn/upload/2022/09/19/img_1663575601740.jpg" alt="" />
          <div>
            <p>
              课程: <span>{{ ele.curriculumName }}</span>
            </p>
            <br />
            <p>
              说明: <span>{{ ele.curriculumDes }}</span>
            </p>
          </div>
        </section>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { encrypt, responseDataGet } from '@/assets/toolJs/common_encrypt.js'
import JsonEditorVue from 'json-editor-vue3'
import { ElMessage } from 'element-plus'

const inputValue = ref('')
const selectValue = ref('1')
const dataSql = ref({})
const checkCurriculumDes = ref('')
const checkValue = ref('')
const options = [
  {
    label: '课程',
    value: '1'
  },
  {
    label: '作者',
    value: '2'
  },
  {
    label: '课程文章',
    value: '3'
  }
]
const clickItem = (ele, index) => {
  checkCurriculumDes.value = index
  checkValue.value = `('${ele.jumpType}','${ele.commonId}','${ele.jumpStr}')`
}
function _copy() {
  const textArea = document.createElement('textarea')
  textArea.value = checkValue.value
  // 使text area不在viewport，同时设置不可见
  document.body.appendChild(textArea)
  textArea.focus()
  textArea.select()
  new Promise((resolve, reject) => {
    // 执行复制命令并移除文本框
    document.execCommand('copy') ? resolve() : reject()
    textArea.remove()
  })
    .then(() => {
      ElMessage.success('复制成功')
    })
    .catch(() => {
      ElMessage.error('复制失败,请手动复制')
    })
}
const copy = () => {
  if (navigator.clipboard) {
    navigator.clipboard
      .writeText(checkValue.value)
      .then(() => {
        ElMessage.success('复制成功')
      })
      .catch(() => {
        _copy()
      })
  } else {
    _copy()
  }
}

const search = () => {
  const data = encrypt(
    JSON.stringify({
      user_id: '19289650',
      type: selectValue.value,
      word: inputValue.value,
      page: '1',
      version: '3.3.8.1',
      platform: 'Android'
    })
  )
  checkCurriculumDes.value = ''
  checkValue.value = ''

  $.ajax({
    url: 'http://192.168.3.130/api/student/newHomeIndex/search',
    type: 'POST',
    dataType: 'json',
    data: { data },
    success: function (res) {
      const result = responseDataGet(res.data)
      dataSql.value = result
    }
  })
}
</script>
